<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06_jQuery-函数和其参数</title>
  <!-- 
  在 jQuery 中，函数和参数的使用是其核心特性之一。jQuery 提供了丰富的函数库，允许开发者以简洁的方式操作 DOM、处理事件、执行动画等。
  一、jQuery 函数的基本结构
  jQuery 的函数通常以  `$`  或  `jQuery`  开头，后面跟着选择器或操作。例如：
  $(selector).action();
  - selector：用于选择 DOM 元素的字符串。
  - action：对选择的元素执行的操作，如  `.hide()` 、 `.show()` 、 `.css()`  等。

  二、常用 jQuery 函数及其参数
   1. 选择器函数
  -  `$()` ：用于选择 DOM 元素。
  // 选择所有段落
  $('p');
  - 参数：可以是 CSS 选择器字符串、HTML 元素、jQuery 对象等。

   2. 事件处理函数
  -  `.on(event, childSelector, data, function)` ：用于绑定事件处理程序。
  $('#myButton').on('click', function() {
      alert('按钮被点击了！');
  });
  - 参数：
    -  `event` ：事件类型（如  `click` 、 `mouseover` ）。
    -  `childSelector` ：可选，指定子元素选择器。
    -  `data` ：可选，传递给事件处理程序的额外数据。
    -  `function` ：事件触发时执行的回调函数。

   3. 动画函数
  -  `.fadeIn(duration, callback)` ：淡入效果。
  $('#myDiv').fadeIn(1000, function() {
      alert('淡入完成！');
  });
  - 参数：
    -  `duration` ：动画持续的时间（毫秒）。
    -  `callback` ：可选，动画完成后执行的回调函数。

   4. DOM 操作函数
  -  `.css(property, value)` ：设置或获取元素的 CSS 属性。
  $('#myDiv').css('color', 'red'); // 设置颜色为红色
  - 参数：
    -  `property` ：要设置的 CSS 属性。
    -  `value` ：要设置的属性值（可选，获取时不需要）。

   5. AJAX 函数
  -  `$.ajax(settings)` ：用于执行 AJAX 请求。
  $.ajax({
      url: 'https://api.example.com/data',
      method: 'GET',
      success: function(data) {
          console.log(data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
          console.error('请求失败:', textStatus);
      }
  });
  - 参数：
    -  `settings` ：一个对象，用于配置 AJAX 请求的各种选项，如  `url` 、 `method` 、 `data` 、 `success` 、 `error`  等。

  三、总结
  - jQuery 的函数和参数设计简洁明了，便于开发者进行 DOM 操作、事件处理、动画效果和 AJAX 请求等。
  - 常用的 jQuery 函数包括选择器、事件处理、动画、DOM 操作和 AJAX 等。
  - 每个函数通常都有多个参数，允许开发者灵活配置功能和行为。
  -->
</head>
<body>

  <ul>
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1. 假值：
    console.log($(), $(''), $(null), $(undefined), $(false));
    
    // 2. 选择器：
    console.log($('li'));
    console.log($('.li-1'));
    console.log($('#li-1'));

    // 3. 事件处理：
    $('li').click(function() {
      console.log('li 被点击了');
    });

    // 4. 动画：
    $('li').animate({ opacity: 0.5 }, 1000); // 1s 后，透明度变为 0.5

    // 5. DOM 操作：
    $('li').append('<li>li-6</li>');

    // 6. AJAX：
    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/posts',
      method: 'GET',
      success: function(data) {
        console.log(data);
      },
      error: function(error) {
        console.log(error);
      }
    });

    // 7. 其他函数：
    console.log($.each([1, 2, 3], function(index, value) {
      console.log(index, value);
    }));

    // 8. 自定义函数：
    $.fn.myFunction = function() {
      console.log('自定义函数');
    }
    $('li').myFunction();

    // 9. 元素类型
    // var bodyEl = document.querySelector('body')
    // console.log(jQuery(bodyEl))
    console.log($('li').get(0)); // 获取第一个 li 元素
    console.log($('li')[0]); // 获取第一个 li 元素
  </script>
  
</body>
</html>